<template>
  <div class="side">
    <div class="info">
      <el-row type="flex" class="topInfo" justify="space-between">
        <span>{{data.arr_date}}</span>
        <span>{{data.org_city_name}} - {{data.dst_city_name}}</span>
      </el-row>
      <el-row type="flex" class="airInfo" justify="space-between">
        <el-col :span="5">
          <strong>{{data.dep_time}}</strong>
          <span>{{data.org_airport_name}}{{data.org_airport_quay}}</span>
        </el-col>
        <el-col :span="14">
          <span>--- {{arrTime}} ---</span>
          <span>{{data.airline_name}}{{data.flight_no}}</span>
        </el-col>
        <el-col :span="5">
          <strong>{{data.arr_time}}</strong>
          <span>{{data.dst_airport_name}}{{data.dst_airport_quay}}</span>
        </el-col>
      </el-row>
    </div>
    <el-row type="flex" class="bar" justify="space-between">
      <span>订单</span>
      <span>金额</span>
      <span>数量</span>
    </el-row>
    <el-row type="flex" class="bar" justify="space-between">
      <span>机票</span>
      <span>￥{{data.seat_infos.par_price}}</span>
      <span>×1</span>
    </el-row>
    <el-row type="flex" class="bar" justify="space-between">
      <span>机建+燃油</span>
      <span>￥{{data.airport_tax_audlet}}/人/单程</span>
      <span>×1</span>
    </el-row>
    <el-row type="flex" class="bar" justify="space-between" align="middle">
      <span>应付总额：</span>
      <span class="price">￥{{totalPrice}}</span>
    </el-row>
  </div>
</template>

<script>
export default {
  props: ["data", "totalPrice"],
  computed: {
    arrTime() {
      var start =
        Number(this.data.dep_time.split(":")[0] * 60) +
        Number(this.data.dep_time.split(":")[1]);
      var end =
        Number(this.data.arr_time.split(":")[0] * 60) +
        Number(this.data.arr_time.split(":")[1]);
      var diff = end - start;
      if (diff < 0) {
        diff = diff + 24 * 60;
      }
      return Math.floor(diff / 60) + "小时" + (diff % 60) + "分";
    }
  }
};
</script>

<style lang="less" scoped>
.side {
  width: 350px;
  border: 1px solid #ddd;
  font-size: 14px;
  color: #666;
  .info {
    padding: 15px;
    color: #333;
    .topInfo {
      margin-bottom: 10px;
      font-size: 16px;
    }
    .airInfo {
      strong {
        font-size: 22px;
      }
      span {
        font-size: 12px;
        color: #999;
      }
      > div {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
      }
    }
  }
  .bar {
    padding: 10px 15px;
    border-top: 1px dashed #ddd;
    .price {
      font-size: 28px;
      color: #ffa500;
    }
  }
}
</style>